import React, { Component } from 'react'
import Todolist_Input from './Todolist_input'
import Todolist_list from './Todolist_list'

// 人   状态   组件          行为
//组件  状态   响应（驱动）   视图

//好处：1、组件化，对页面进行拆分，代码的可读性高，更有利于团队协作
//      2、React提供了数据绑定，减少DOM操作，提高开发效率
//      3、利用虚拟DOM提升性能
//React怎么用：页面当中变化的内容一般都需要设置一个状态，用状态驱动视图
//到底是否使用状态：1、变化的地方是不是从父组件（props）得来的 ————不用
//                 2、能不能基于现有的state（状态）和props（父组件）经过计算得来

export default class Todolist extends Component {
    //要得到原来的数据，则初始的状态赋值不应该是空，要让它取到本地值
    state = {list: JSON.parse(localStorage.getItem('todolist')) || [],
             
    }
    //回车事件
    addItem = (e)=>{
        if(e.keyCode == 13){
            // this.state.list.push(this.state.val);
            // this.setState({list:this.state.list})

            //... 扩展语法允许在需要多个参数（用于函数调用）或多个元素（用于数组文字）
            //或多个变量（用于解构赋值）的位置扩展表达式。
            // list:[新数组，原数组展开]
            this.setState({
                list:[     //setState是异步的
                //添加的是一个对象，则后续要按照对象形式绑定
                {title:e.target.value, time:Date.now()}, 
                ...this.state.list
                ]
            },()=>{
                //异步函数执行完执行回调
                localStorage.setItem(
                    'todolist',
                    JSON.stringify(this.state.list)
                )
            })
            //本地存储
            localStorage.setItem("todolist",JSON.stringify(this.state.list))
        }
    }

    //删除事件，下面有箭头函数是真正的事件处理函数
    delItem = (i)=> {
        // //不建议这样写，不要对原状态进行直接更改，list地址封装没有改变过
        // this.state.list.splice(i, 1);
        // this.setState( {list:this.state.list} )
        //可以先复制出来一个状态 let arr = [...this.state.list]再进行前两行
        
        //建议这样写：
        //回调函数：当前被处理的元素，当前元素的索引（下标），本身。
        //filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        //将与i不相等的留下，与i相等的过滤掉
        let newList = this.state.list.filter( (item,index)=> i!=index )
        this.setState( {list:newList})
        localStorage.setItem("todolist",JSON.stringify(newList))
    }
    
    savaData = (type)=>{
        return (e)=>{
            this.setState({
                [type]:e.target.value  //加[]变成变量
            })
        }
    }

    render() {
        const {list} = this.state;
        return (
            <div>
                ToDoList
                <Todolist_Input addItem={this.addItem} />
                <Todolist_list list={list} delItem={this.delItem}/>
            </div>
        )
    }
}
//高阶函数：接受一个函数作为参数或者将一个函数作为输出返回的函数

//函数柯里化：就是将一个接收多个参数的函数，变成只接受一个参数，并且返回接收其余参数
//且进行计算的函数的一种方式
// const add = (a,b,c)=>{
//     return a+b+c;
// }

// const curryAdd = (a)=>{
//     return (b)=>{
//         return (c)=>{
//             return a+b+c;
//         }
//     }
// }
//const curry = a=>b=>c=>a+b+c;  
//箭头函数如果只有一个参数则()可以不写，如果只有一个返回值（直接返回时）则return可以不写
// console.log( add(1,2,3));
// console.log( curryAdd(1)(2)(3));
//console.log( curry(1)(2)(3));